<template>
	<view class="test-question">
		<view class="title">
			<text class="title-text">MBTI性格类型测试问卷</text>
			<text class="title-tag">世界级权威测试</text>
		</view>
		<view class="que-class">
			<text class="line">基础题{{basicNum}}道</text>
			<text>· 描述题{{describeNum}}道</text>
		</view>
		<view class="content">
			<view class="question" v-for="(item, i) in questions" :key="i">
				<view class="" v-if="i==currentIndex">
					<view class="cont-item">
						<view class="title">{{item.question}}</view>
						<view class="option" :class="{active: activeHandle(item.id, 1)}" @click="next(item, 1)">
							{{item.answer1}}
						</view>
						<view class="option" :class="{active: activeHandle(item.id, 2)}" @click="next(item, 2)">
							{{item.answer2}}
						</view>
					</view>
					<view class="number">
						<text>{{currentIndex+1}}</text>/{{questions.length}}
					</view>
				</view>
			</view>
		</view>
		<view class="prev" v-if="currentIndex>0" @click="prev()">
			返回上一题
		</view>
		<view class="keep-out" v-if="testEnd" @click="seeResult()">查看结果</view>
		<view v-else class="keep-out" @click="saveProgress('keepOut')">
			{{questions.length==progress.length?'提交':'保存退出'}}
		</view>
		<uni-transition mode-class="fade"
			:styles="utils.transitionStyles.bg" :show="point_prize" @click="point_prize=false">
		</uni-transition>
		<uni-transition mode-class="fade"
			:styles="utils.transitionStyles.fade"
			:show="point_prize">
			<view class="point-prize popup-top">
				<view class="point-content">
					<view class="point">
						+{{score}}积分
					</view>
					<view class="tips" v-html="popupText">
					</view>
					<text class="close-popup" @click="onclickBtn()">{{popupBtn}}</text>
				</view>
			</view>
		</uni-transition>
	</view>
</template>
<script>
export default {
	data() {
		return {
			currentItem: {},
			currentIndex: 0,
			currentId: '',
			basicNum: 0,
			describeNum: 0,
			questions: [],
			progress: [],
			score: 0,
			popupText: `<text>已完成部分答题任务
继续答题可获取更多积分</text>`,
			popupBtn: '继续答题',
			point_prize: false,
			testEnd: false
		}
	},
	onLoad() {
		this.getfindQuestion()
	},
	methods: {
		getfindQuestion(){
			this.api.get('mbti/findQuestion').then(res=>{
				if(res.data.state !='ok')return
				this.describeNum = res.data.describeNum
				this.basicNum = res.data.basicNum
				let list = res.data.questions
				this.mbtiFindProgress(list)
			})
		},
		mbtiFindProgress(list){
			this.api.get('mbti/findProgress').then(res=>{
				if(res.data.state !='ok')return
				this.questions = list;
				if(res.data.mbtiPersonality){
					this.seeResult()
				}
				let myProgress = res.data.myProgress;
				if(!myProgress)return
				let p_list = myProgress.progress;
				p_list = p_list?JSON.parse(p_list):[]
				let len = p_list.length,
				lastItem = p_list[len-1];
				this.progress = p_list;
				if(len == 0) return;
				this.currentIndex = len - 1 
				this.currentId = `${lastItem.id}${lastItem.choice}`
				
				this.currentItem = lastItem
			})
		},
		saveProgress(type){
			// return
			this.api.post('mbti/saveProgress', {
				progress: JSON.stringify(this.progress)
			}).then(res=>{
				if(res.data.state !='ok')return
				let result = res.data.mbtiPersonality || {};
				if(res.data.scoreChange>0){
					this.score = res.data.scoreChange;
					if(result.id){
						this.popupText = `已答完全部答题任务
参加其他任务可获取更多积分`
						this.popupBtn = '查看结果'
						this.testEnd = true;
					}
					this.point_prize = true
					return;
				}
				if(result.id){
					this.seeResult()
				}else if(type == 'keepOut'){
					this.goPersonal()
				}
				
			})
		},
		next(item, val){
			this.currentId = `${item.id}${val}`
			
			this.currentItem = item
			
			let proItem = this.progress.find(info=>info.id==item.id) || {};
			if(proItem.id){
				proItem.choice = val
			}else{
				this.progress.push({id: item.id, choice: val})
			}
			
			if(this.currentIndex == (this.questions.length-1)) return
			this.currentIndex ++;
			if(this.basicNum == this.currentIndex) {
				// 到达某个阶段
				this.saveProgress()
				return
			}
			let currentPosition = this.basicNum>this.currentIndex ? this.currentIndex : this.currentIndex-this.basicNum
			if(currentPosition%10 == 0 && this.progress.length<=this.currentIndex){
				this.saveProgress()
			}
			// 显示获得积分的弹窗，逻辑待定
			// if(this.currentIndex==2){
			// 	this.point_prize = true
			// }
		},
		prev(){
			this.currentIndex --;
			this.currentItem = this.questions[this.currentIndex]
			this.currentId = `${this.currentItem.id}${this.progress[this.currentIndex].choice}`
		},
		activeHandle(id, val){
			let index = this.progress.findIndex(item=>item.id==id&&item.choice==val)
			if(index == -1) {
				return false
			}else{
				return true
			}
		},
		onclickBtn(){
			this.point_prize = false;
			if(this.testEnd){
				this.seeResult()
			}
		},
		seeResult(){
			uni.navigateTo({
				url: "/pages/MBTI/result"
			})
		},
		goPersonal(){
			let userInfo = getApp().globalData.userInfo
			let path = ''
			if(userInfo.user_type==2){
				path = '/pages/student/personal'
			}else{
				path = '/pages/teachers/personal'
			}
			
			uni.switchTab({
				url: path
			})
		}
	}
}
</script>
<style lang="less" scoped>
	.test-question{
		padding: 64rpx 32rpx 0;
		background-image: url(~@/static/mbti/export-bg.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 0 0;
	}
	.title-text{
		font-size: 36rpx;
		color: #2A2A2A;
		font-weight: 600;
	}
	.title-tag{
		margin-left: 12rpx;
		display: inline-block;
		width: 210rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: linear-gradient(45deg, #FFC8A0, #FF9767);
		border-radius: 25rpx 25rpx 25rpx 0;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		
	}
	.que-class{
		margin-top: 14rpx;
		color: #2A2A2A;
		font-size: 22rpx;
		.line{
			margin-right: 8rpx;
			text-decoration: underline;
		}
	}
	.content{
		margin-top: 40rpx;
		padding: 64rpx 52rpx 54rpx;
		background-color: #fff;
		border-radius: 32rpx;
		text-align: center;
		box-shadow: 0 0 21rpx 0 rgba(235, 235, 235, .5);
	}
	.cont-item{
		.title{
			font-size: 36rpx;
			line-height: 58rpx;
			font-weight: 600;
		}
		.option{
			height: 110rpx;
			line-height: 110rpx;
			margin-top: 36rpx;
			font-size: 28rpx;
			font-weight: 600;
			border-radius: 20rpx;
			border: 5rpx solid #262E3F;
		}
		.active{
			color: #fff;
			background-color: #28C2CD;
			border: none;
		}
	}
	.number{
		margin-top: 60rpx;
		color: #666666;
		text{
			font-weight: 600;
			font-size: 48rpx;
			color: #162641;
		}
	}
	.prev, .keep-out{
		height: 94rpx;
		line-height: 94rpx;
		border-radius: 20rpx;
		font-size: 32rpx;
		text-align: center;
	}
	.prev{
		margin: 60rpx 84rpx 0;
		color: #fff;
		background-color: #28C2CD;
	}
	.keep-out{
		margin: 32rpx 84rpx 0;
		box-sizing: border-box;
		color: #262E3F;
		border: 1rpx solid #979797;
	}
	.c-title{
		line-height: 48rpx;
		font-size: 30rpx;
		color: #333;
	}
	.point-prize{
		// position: absolute;
		background-color: transparent;
		width: 560rpx;
		height: 745rpx;
		background-image: url(~@/static/mbti/prize-bg.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 0;
		
	}
	.point-content{
		position: absolute;
		width: 100%;
		bottom: 50rpx;
		text-align: center;
		
	}
	.point{
		color: #FA7F45;
		font-size: 48rpx;
		font-weight: bold;
	}
	.tips{
		white-space: pre-line;
		margin-top: 24rpx;
		color: #666666;
		font-size: 26rpx;
		line-height: 42rpx;
		
	}
	.close-popup{
		margin-top: 40rpx;
		display: inline-block;
		width: 320rpx;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #FA7F45;
		border-radius: 20rpx;
		color: #fff;
		font-size: 32rpx;
	}
</style>